<template>
    <div class="echartsBox" id="echartsBox">
        <div class="echarts" :id="id"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    name: 'elEcharts',
    props: {
        id: {
            type: String,
            default: 'echarts'
        },
        optionData: {
            type: Array,
            default: () => {
                return []
            }
        },
        optionData1: {
            type: Object,
            default: () => {
                return {}
            }
        },
        showName: {
            type: Array,
            default: () => {
                return []
            }
        },
        xAxisText: {
            type: String,
            default: 'day'
        },
        type: {
            type: String, // 折线图/堆叠面积图 line；饼图 pie；雷达图 radar；柱状图 bar
            default: 'line'
        },
        pile: {
            type: Boolean,
            default: false
        },
        barDirection: {
            type: String, // crosswise,vertical
            default: 'vertical'
        },
        tooltip: {
            type: String, // item
            default: 'axis'
        }
    },
    data() {
        return {
            myChartDom: ''
        }
    },
    mounted() {
        this.setEchartsData()
        // console.log(this.optionData)
    },
    methods: {
        setEchartsData() {
            const chartDom = document.getElementById(this.id)
            const myChart = echarts.init(chartDom)
            this.myChartDom = myChart
            let option
            option = {
                tooltip: {
                    trigger: this.tooltip
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                // xAxis: {
                //     type: 'category',
                //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                // },
                // yAxis: {
                //     type: 'value'
                // },
                series: []
            }
            this.setParams(option, (res) => {
                if (res) {
                    myChart.setOption(res)
                    window.addEventListener('resize', () => {
                        myChart.resize()
                    })
                }
            })
        },

        setParams(option, callBack) {
            // 折线图/堆叠面积图 line；饼图 pie；雷达图 radar；柱状图 bar
            // let callBackData: Array<any> = []
            const that = this
            switch (this.type) {
                case 'line':
                    option.xAxis = {
                        type: 'category',
                        data: []
                    }
                    option.yAxis = {
                        type: 'value'
                    }
                    option.series = []
                    that.showName.forEach((v) => {
                        let seriesItem = {
                            data: [],
                            type: 'line',
                            name: v.name,
                            fields: v.fields
                        }
                        if (that.pile) {
                            seriesItem.areaStyle = {}
                            seriesItem.emphasis = {
                                focus: 'series'
                            }
                        }
                        option.series.push(seriesItem)
                    })
                    that.optionData.forEach((v) => {
                        option.xAxis.data.push(v[that.xAxisText])
                        option.series.forEach((o) => {
                            Object.keys(v).forEach((k) => {
                                if (o.fields == k) {
                                    o.data.push(v[k])
                                }
                            })
                        })
                    })
                    break
                case 'pie':
                    delete option.xAxis
                    delete option.yAxis
                    option.series = [
                        {
                            name: that.optionData1.projectName,
                            type: 'pie',
                            radius: ['40%', '70%'],
                            itemStyle: {
                                borderRadius: 5,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            data: []
                        }
                    ]
                    that.showName.forEach((v) => {
                        let data = {
                            value: that.optionData1[v.fields],
                            name: v.name
                        }
                        option.series[0].data.push(data)
                    })
                    break
                case 'radar':
                    delete option.xAxis
                    delete option.yAxis
                    option.radar = {
                        // shape: 'circle',
                        indicator: []
                    }
                    option.series = [
                        {
                            name: '贡献度',
                            type: 'radar',
                            data: [
                                {
                                    value: [],
                                    name: `总贡献度 ${that.optionData1.totalNums}`
                                }
                            ]
                        }
                    ]
                    let maxNum = ''
                    that.optionData1.contributionEntities.forEach((v, i) => {
                        if (i > 0) {
                            if (v.planNums > that.optionData1.contributionEntities[i - 1].planNums) {
                                maxNum = v.planNums
                            } else {
                                maxNum = that.optionData1.contributionEntities[i - 1].planNums
                            }
                        } else {
                            maxNum = that.optionData1.contributionEntities[i].planNums
                        }

                        let radar = {
                            name: v.principal,
                            max: maxNum
                        }
                        option.radar.indicator.push(radar)
                        option.series[0].data[0].value.push(v.planNums)
                    })
                    break
                case 'bar':
                    // crosswise,vertical
                    let showTextBar = []
                    let showData = []
                    that.showName.forEach((v) => {
                        showTextBar.push(v.name)
                        showData.push(that.optionData1[v.fields])
                    })
                    if (this.barDirection == 'crosswise') {
                        option.xAxis = {
                            type: 'value'
                        }
                        option.yAxis = {
                            type: 'category',
                            data: showTextBar
                        }
                    } else if (this.barDirection == 'vertical') {
                        option.yAxis = {
                            type: 'value'
                        }
                        option.xAxis = {
                            type: 'category',
                            data: showTextBar
                        }
                    }

                    option.series = [
                        {
                            data: showData,
                            type: 'bar',
                            name: '延期数'
                        }
                    ]
                    break
                default:
                    console.log('111')
            }
            callBack(option)
        }
    }
}
</script>
<style lang="scss" scoped>
.echartsBox {
    display: flex;
    width: 100%;
    .echarts {
        height: 300px;
        width: 100%;
    }
}
</style>
<style>
.echarts div {
    width: 100% !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.echarts div canvas {
    width: 100% !important;
}
</style>
